<template>
	<view class="container">
		<search class="mSearch-input-box" 
		:mode="2" button="inside" 
		:placeholder="defaultKeyword" @search="doSearch"
		 @input="inputChange" @confirm="doSearch" v-model="keyword"></search>
		<view class="three" v-for="(item,index) in studentList" :key="index" @click="itemClick(item.id)">
			<view class="three-title">{{item.name}}</view>
			<image class="three-more" src="/static/report/report_more.png"></image>
		</view>
		<view class="empty" v-if="noData">
			<image class="empty-img" src="/static/search/empty.png"></image>
			<view class="empty-txt">没有搜索到相关的内容</view>
		</view>
	</view>
</template>

<script>
	import {isEmpty} from '@/utils/index';
	import Search from '@/components/common/mehaotian-search-revision/mehaotian-search-revision.vue';
	import ReportService from '@/services/report/index';
	const reportService = new ReportService();
	export default {
		components: {
			Search
		},
		data() {
			return {
				noData:true,
				param:{
					classId:undefined,
					ascription:undefined
				},
				defaultKeyword:'请输入关键字',
				keyword:"",
				studentList: []
			}
		},
		onLoad(query) {
			this.param = query;
		},
		methods:{
			doSearch(key){
				if(isEmpty(this.keyword)){
					uni.showToast({
						title:'请输入关键字',
						icon:'none',
						duration:2000
					})
					return;
				}
				this.param.keyword = this.keyword;
				reportService.studentSearch(this.param).then(response=>{
					if(response.success){
						this.studentList = response.result;
						this.noData = isEmpty(this.studentList);
						console.log(this.noData);
					}else{
						uni.showToast({
							title:response.message,
							icon:'none',
							duration:2000
						})
					}
				});
			},
			inputChange(event){
				console.log(this.keyword);
			},
			itemClick(userId){
				uni.navigateTo({
					url:`/pages/report/studentAnalysis?ascription=${this.param.ascription}&userId=${userId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #ffffff;
		padding: 0 20upx;
	}

	.mSearch-input-box {
		display: inline-block;
		width: 100%;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 60upx;
		border: solid 2upx #f7f7f7;
		margin: 40upx 0;
	}
	.three {
		display: flex;
		line-height: 64upx;
		padding: 0 50upx;
	
		&-title {
			flex: 1;
			color: #333333;
			font-size: 24upx;
		}
	
		&-more {
			width: 24upx;
			height: 24upx;
			margin-top: 12upx;
		}
	}
	.empty {
		margin-top: 150upx;
		font-size: 28upx;
		color: #666666;
		text-align: center;
		&-img{
			width: 220upx;
			height: 180upx;
		}
		&-txt {
			margin-top: 60upx;
		}
	}
</style>
